<script>
import mixin from "../../common/mixin";
import { mapGetters } from 'vuex'
export default {
  name: "index",
  mixins: [mixin],
  data() {
    return {
      options1: [
        {
          label: '全部简历',
          value: '',
        },
      ],
      options2: [
        {
          label: '全部状态',
          value: '',
        },
        {
          label: '已查看',
          value: '1',
        },
        {
          label: '未查看',
          value: '0',
        },
      ],
      category: '',
      status: '',
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  onShow() {
    this.$api.getCategoryList().then(res => {
      this.options1 = [
          ...this.options1,
          ...res.map(item => {
            return {
              label: item.name,
              value: item.name
            }
          })
      ]
    })
    this.getList()
  },
  methods: {
    getList() {
      uni.showLoading({
        title: '加载中'
      })
      console.log(this.category, this.status)
      this.$api.getPostJoinList({
        category: this.category,
        is_read: this.status,
        company_user_id: this.userInfo.id
      }).then(res => {
        this.dataList = res
      }).finally(() => {
        uni.hideLoading()
      })
    },
    toDetail(item) {
      if (item.is_read === 0) {
        uni.showModal({
          title: '提示',
          content: '查询需扣除相应费用，确认支付？',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: `/pages/resume/detail?joinId=${item.id}&resume_id=${item.resume_id}&name=${item.post.name}`
              })
            }
          }
        })
      } else {

        uni.navigateTo({
          url: `/pages/resume/detail?joinId=${item.id}&resume_id=${item.resume_id}&name=${item.post.name}`
        })
      }
    },
  }
}
</script>

<template>
  <div class="company-list">
    <u-navbar title="信息管理" :background="{ background: '#05C8CE'}" title-color="#000" :border-bottom="true"></u-navbar>
    <div class="dropdown-wrapper">
      <div class="dropdown-box">
        <u-dropdown @close="getList" active-color="#05C8CE" in-active-color="#000000">
          <u-dropdown-item v-model="category" :options="options1" title="全部简历"></u-dropdown-item>
          <u-dropdown-item v-model="status" :options="options2" title="全部状态"></u-dropdown-item>
        </u-dropdown>
      </div>
    </div>
    <div class="list-view">
      <u-empty v-if="!dataList.length" text="暂无数据" mode="list"></u-empty>
      <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100%">
        <div class="list-item" v-for="(item,index) in dataList" :key="index">
          <div class="f-r j-b">
            <div class="title">{{item.post && item.post.name }}</div>
          </div>
          <div style="display: flex;align-content: center;margin: 12rpx 0">
            <div class="category">{{ item.post &&item.post.category }}</div>
            <div class="post">{{item.post && item.post.post_category }}</div>
          </div>
          <div class="line"></div>
          <div class="f-r a-c j-b">
            <div class="f-r a-c j-b">
              <image src="/static/company/date.png" style="width: 30rpx;height: 30rpx;margin-right: 12rpx"></image>
              <div class="text">投递时间：{{ item.create_time }}</div>
            </div>
            <div :class="['button primary', item.disabled ? 'info' : '']" @click="toDetail(item)">查看</div>
          </div>
        </div>
        <u-loadmore v-if="dataList.length" :status="loading" />
      </scroll-view>
    </div>
  </div>
</template>

<style lang="scss">
.company-list {
  height: 100%;
  background: #F3F3F3;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .list-item {
    background-color: #ffffff;
    padding: 40rpx;
    border-radius: 4rpx;
    margin-bottom: 36rpx;

    .category {
      height: 44rpx;
      background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      line-height: 44rpx;
      padding: 0 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #FFFFFF;
      text-align: center;
    }
    .post {
      height: 44rpx;
      border: 1px solid #05C8CE;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      line-height: 40rpx;
      padding: 0 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #868686;
      text-align: center;
      margin-left: 20rpx;
    }
    .title {
      height: 64rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 40rpx;
      color: #000000;
      line-height: 47rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .location {
      font-size: 24rpx;
      color: #666666;
    }
    .line {
      width: 100%;
      border: 1rpx solid #EDEDED;
      margin: 28rpx 0;
    }
    .f-r {
      display: flex;
    }
    .a-c {
      align-items: center;
    }
    .j-b {
      justify-content: space-between;
    }
    .button {
      height: 56rpx;
      padding: 0 36rpx;
      background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      line-height: 56rpx;
      color: #ffffff;
    }
    .button.info {
      background: #B6BDBD;
    }
    .text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #7B7B7B;
      line-height: 23rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .tag {
      padding: 0 24rpx;
      height: 34rpx;
      background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      border: 1px solid #05C8CE;
      line-height: 30rpx;
      color: #ffffff;
      margin-right: 12rpx;
    }
    .tag2 {
      background-color: transparent !important;
      border: 1px solid #868686;
      color: #868686;
      font-size: 16rpx;
    }
  }
  .popup-content {
    padding: 32rpx;
  }
  .list-view {
    flex-grow: 1;
    overflow: hidden;
    background: rgba(227, 233, 247, 0.18);
    .list-item {
      background-color: #ffffff;
      padding: 40rpx;
      border-radius: 4rpx;
      margin-bottom: 36rpx;
      .title {
        height: 64rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #000000;
        line-height: 47rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .location {
        font-size: 24rpx;
        color: #666666;
      }
      .line {
        width: 100%;
        border: 1rpx solid #EDEDED;
        margin: 28rpx 0;
      }
      .f-r {
        display: flex;
      }
      .a-c {
        align-items: center;
      }
      .j-b {
        justify-content: space-between;
      }
      .button {
        height: 56rpx;
        padding: 0 36rpx;
        background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        line-height: 56rpx;
        color: #ffffff;
      }
      .button.info {
        background: #B6BDBD;
      }
      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #7B7B7B;
        line-height: 23rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .tag {
        padding: 0 24rpx;
        height: 34rpx;
        background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        border: 1px solid #05C8CE;
        line-height: 30rpx;
        color: #ffffff;
        margin-right: 12rpx;
      }
      .tag2 {
        background-color: transparent !important;
        border: 1px solid #868686;
        color: #868686;
        font-size: 16rpx;
      }
    }
    padding: 24rpx;
  }
  .dropdown-box {
    width: 100%;
    border-radius: 6rpx;
    background-color: #ffffff;
    .u-dropdown__menu__item {
      background-color: #ffffff;
      margin: 0 24rpx;
    }
    .area,.area2 {
      height: 52rpx;
      line-height: 52rpx;
      font-weight: 500;
      font-size: 24rpx;
    }
    .area {
      margin: 0 20rpx;
      &.active {
        color: #ffffff !important;
        background-color: #05C8CE;
      }
    }
    .active {
      color: #05C8CE;
    }
  }
}
</style>
